<template>
  <div :class="['nav-header', scrollPosition > 20 ? 'nav-header-fixed' : '']">
    <div class="nav-header-l">
      <img
        v-if="scrollPosition > 20"
        src="@/assets/img/home/logo4.png"
        alt=""
      />
      <img v-else src="@/assets/img/home/logo2.png" alt="" />
      <div>
        <h1>西安友盟智能科技</h1>
        <h3>Xi'an Youmeng intelligent Electronic Technology</h3>
      </div>
    </div>
    <div class="nav-header-r">
      <div
        v-for="(item, index) in list"
        :class="['nav-header-r-item', currentFlag == index ? 'nowStation' : '']"
        @click="gotoPage(index)"
      >
        {{ item }}
        <!-- <div v-if="item == '案例展示'" class="exampleul">
          <div class="exampleul-item" @click="goDetail(1)">渠道数据采集</div>
          <div class="exampleul-item" @click="goDetail(2)">渠道数据清洗</div>
          <div class="exampleul-item" @click="goDetail(3)" style="border: none">
            主数据管理
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
// 导航栏数据
let list = reactive(["网站首页", "业务领域", "案例展示", "关于我们"]);
let currentFlag = ref<number>(0);
let currentgo = ref<number>(0);
let scrollPosition = ref<number>(0);

function handleScroll() {
  scrollPosition.value = window.scrollY || window.pageYOffset;
  console.log("当前滚动位置:");
}
function goDetail(e: number) {
  if (e == 1) {
    router.push({
      name: "Exampleitem",
    });
  } else if (e == 2) {
    router.push({
      name: "Exampleitem2",
    });
  }
  currentgo.value = e;
}
onMounted(() => {
  scrollPosition.value = window.scrollY || window.pageYOffset;
  window.addEventListener("scroll", handleScroll);
});

watch(
  () => router.currentRoute.value.path, // 监听路由路径的变化
  (newPath) => {
    if (newPath === "/") {
      currentFlag.value = 0;
    } else if (newPath === "/Business") {
      currentFlag.value = 1;
    } else if (newPath === "/Example") {
      currentFlag.value = 2;
    } else if (newPath === "/About") {
      currentFlag.value = 3;
    } else if (newPath === "/Exampleitem") {
      currentFlag.value = 4;
    } else if (newPath === "/Exampleitem2") {
      currentFlag.value = 5;
    } else if (newPath === "/Exampleitem3") {
      currentFlag.value = 6;
    } else if (newPath === "/Exampleitem4") {
      currentFlag.value = 7;
    } else if (newPath === "/Exampleitem5") {
      currentFlag.value = 8;
    } else if (newPath === "/Exampleitem6") {
      currentFlag.value = 9;
    }
  },
  { immediate: true, deep: true }
);
function gotoPage(index: number) {
  if (index == 0) {
    router.push({
      name: "Home",
    });
  } else if (index == 1) {
    router.push({
      name: "Business",
    });
  } else if (index == 2) {
    router.push({
      name: "Example",
    });
  } else if (index == 3) {
    router.push({
      name: "About",
    });
  }
}
</script>
<style scoped lang="scss">
.nav-header {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  height: 100px;
  z-index: 11;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  transition: all 0.5s ease;

  &-fixed {
    height: 110px;
    background: rgba(255, 255, 255, 8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    color: #000;
  }

  &-l {
    margin-left: 18%;
    display: flex;
    align-items: center;
    h1 {
      font-weight: 700;
    }
    img {
      width: 160px;
    }
  }

  &-r {
    margin-right: 18%;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;

    &-item {
      line-height: 100px;
      height: 100%;
      font-size: 17px;

      &:hover {
        cursor: pointer;
        // color: #fff;
        border-bottom: 4px solid #16acfd;
      }
    }
  }
}

.example {
  position: relative;

  &:hover > .exampleul {
    opacity: 1;
  }
}

.exampleul-item:hover {
  /* 鼠标悬停时将文字颜色变为红色，你可以根据需求修改 */
  color: #fff;
  background-color: #16acfd;
}

.nowStation {
  // color: #fff;
  border-bottom: 4px solid #16acfd;
}

.exampleul {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  min-width: 150px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 5px;
  padding: 6px;

  &-item {
    height: 50px;
    color: #000;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #d9d9d9;
  }

  &::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #d9d9d9 transparent;
  }
}
</style>
